<template>
  <div class="app-container">
    <!-- 基础信息 -->
    <h5 class="titleInfo">基础信息</h5>
    <el-form class="form" ref="form"  :rules="rules" :model="form" label-width="130px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="会员手机号">
            <span class="spanToInput">{{form.username | filterNull}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称">
            <span class="spanToInput">{{form.nickName | filterNull}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地区">
            <el-cascader :options="options" v-model="selectedOptions" @change="pcaList"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名">
            <span class="spanToInput">{{list1.realname | filterNull}}</span>
            <!-- <el-input v-model="form.nickName"></el-input> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="推荐码">
            <span class="spanToInput">{{list1.superCode | filterNull}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 推荐人信息 -->
    <div class="divBar"></div>
    <h5 class="titleInfo">推荐人信息</h5>
    <el-form ref="list1" :inline="true" :model="list1" label-width="130px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="推荐人姓名">
            <span class="spanToInput">{{list1.refereeName | filterNull}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="推荐人手机号">
            <span class="spanToInput">{{list1.referee | filterNull}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 实名认证信息 -->
    <div class="divBar"></div>
    <h5 class="titleInfo">实名认证信息</h5>
    <el-form ref="list1" :inline="true" :model="list1" label-width="130px">
      <el-row v-if="userIdentityAuth.length==0">
        <el-col :span="12">
          <el-form-item label="证件类型">
            <span class="spanToInput">暂无</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件号码">
            <span class="spanToInput">暂无</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-else>
        <div v-for="(i,index) in userIdentityAuth" :key="index">
          <el-col :span="12">
            <el-form-item label="证件类型">
              <span class="spanToInput">{{i.identityType | cardNull}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件号码">
              <span class="spanToInput">{{i.identity | filterNull}}</span>
            </el-form-item>
          </el-col>
        </div>
      </el-row>
    </el-form>
    <!-- 银行卡信息 -->
    <div class="divBar"></div>
    <h5 class="titleInfo">银行卡信息</h5>
    <el-form :inline="true" label-width="130px">
      <el-row v-for="(val,index) in list2" :key="index">
        <el-col :span="12">
          <el-form-item label="开户行">
            <span class="spanToInput">{{val.bankName | filterNull}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行卡号">
            <span class="spanToInput">{{val.cardNumber | filterNull}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="list2.length==0">
        <el-col :span="12">
          <el-form-item label="开户行">
            <span class="spanToInput">暂无</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行卡号">
            <span class="spanToInput">暂无</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { vipInfo } from "@/api/vipInfo";
import { editVip } from "@/api/editVip";
// 手机号正则
const phoneReg = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入会员手机号"));
  } else {
    const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    if (reg.test(value)) {
      callback();
    } else {
      return callback(new Error("手机格式错误"));
    }
  }
};

export default {
  name: "vipInfo",
  data() {
    return {
      userId: "",
      businessAccountType:"",
      form: {},
      rules: {
        username: [{ required: true, validator: phoneReg, trigger: "blur" }],
        nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        province: [{ required: true, message: "请输入省市区", trigger: "blur" }]
      },
      options: [],
      selectedOptions: [],
      list1: {},
      userIdentityAuth: [],
      list2: [],
      submitForm: {}
    };
  },
  filters: {
    filterNull(e) {
      if (!e) {
        return "暂无";
      } else {
        return e;
      }
    },
    cardNull(e) {
      return window.helper.cardType(String(e));
    }
  },
  mounted() {
    this.userId = Number(this.$route.query.userId);
    console.log(this.$route.query.type);
    this.businessAccountType = this.$route.query.type;
    // 省市区数据获取
    var addData = require("../../../../static/address/area.json");
    this.options = addData;
    this.getList();
  },
  methods: {
    // 省市区数据改变
    pcaList(value) {
      let e = this.selectedOptions;
      e = value;
      this.form.province = e[0];
      this.form.city = e[1];
      this.form.area = e[2];
    },
    //获取列表数据
    getList() {
      let datas = { userId: this.userId ,businessAccountType:this.businessAccountType};
      console.log(datas.businessAccountType)
      vipInfo(datas)
        .then()
        .then(res => {
          if (!res.data.code) {
            let rd = res.data.data;
            if (rd.user) {
              this.list1 = rd.user;
              this.userIdentityAuth = rd.userIdentityAuth;
              this.form = rd.user;
              this.selectedOptions = [
                rd.user.province,
                rd.user.city,
                rd.user.area
              ];
            }
            if (rd.bankCard) {
              this.list2 = rd.bankCard;
            }
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 0px !important;
}
</style>